.wdu-modal {
    .wdu-full();
    position: fixed;
    z-index: 2000;
    display: none;
    overflow: auto;

    &__container {
        width: max-content;
        position: relative;
        opacity: 0;
        margin: 0 auto;
        margin-top: 15vh;
        padding: 20px;
    }

    &__visible {
        display: block;
        opacity: 0;
        animation: modalMaskShow 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s 1 normal forwards;

        .wdu-modal__container {
            animation: modalShow 0.2s cubic-bezier(0.32, 0.32, 0.19, 1) 0s 1
                normal forwards;
        }
    }

    &__hidden {
        opacity: 1;
        animation: modalMaskHide 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.2s 1 normal forwards;

        .wdu-modal__container {
            animation: modalHide 0.2s cubic-bezier(0.44, 0.11, 0, 0.99) 0s 1
                normal forwards;
        }
    }

    &__mask {
        background-color: rgba(0, 0, 0, 0.557);
    }

    &__fullScreen {
        .wdu-modal__container {
            padding: 0;
            width: 100%;
            height: calc(100% - 20px) !important;
            margin: 0 !important;
        }
    }
}

@keyframes modalMaskShow {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modalMaskHide {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes modalShow {
    from {
        opacity: 0;
        margin-top: 10vh;
        height: 0;
    }

    to {
        opacity: 1;
        margin-top: 15vh;
        height: auto;
    }
}

@keyframes modalHide {
    from {
        opacity: 1;
        margin-top: 15vh;
    }

    to {
        opacity: 0;
        margin-top: 12vh;
    }
}
